<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<title>我的订单</title>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<link rel="stylesheet" type="text/css" href="/static/css/shoujisc.css">

<link rel="stylesheet" type="text/css" href="/static/css/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/my.css">
<script type="text/javascript" src="/static/js/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="/static/js/myinit.js"></script>

<script type="text/javascript" src="/static/js/cook_shop_cart.js"></script>

</head>
<body bgcolor="#E4E4E4">
<div data-role="page" id ="home">
  <div data-role="header" >
    <h1>我的充值卡</h1>
  </div>
  <div><img src="/static/img/zu20.png" width="100%" height="auto"></div>
  <div style="height:50px;line-height:50px;font-size:16px;color:#333;background:white">　当前充值卡余额<span style="font-size:18px;color:#02ADFF">￥<span id="money"></span></span></div>
  <br />
 
  
  <div role="main" class="ui-content" >
    <!--<div id="list" style="text-align:center;"> </div>-->
     <div style="color:#333;background:white;font-size:14px">
    <div style="border:1px solid #E8E8E8;list-style-type:none;width:100%;height:40px;line-height:40px;padding-left:1em" id="toxiugaimima">支付密码设置</div>
    <div style="border:1px solid #E8E8E8;list-style-type:none;width:100%;height:40px;line-height:40px;padding-left:1em">充值卡介绍</div>
    <div style="border:1px solid #E8E8E8;list-style-type:none;width:100%;height:40px;line-height:40px;padding-left:1em">如何获取充值卡</div>
    <div style="border:1px solid #E8E8E8;list-style-type:none;width:100%;height:40px;line-height:40px;padding-left:1em">如何使用充值卡</div>
  </div>
    
    <div data-role="listview" id="list" style="text-align:center"> </div>
    <div style="clear:both"></div>
    
  </div>
  
	<div data-role="footer" data-position="fixed" data-tap-toggle="false" >
    	<ul class="quanbu-ul1" id="bottom_menu">
			<li  id="toindex">
				<div class="qu-tu1"> <a  class="atu1"><img src="/static/img/sjsc-02.png"></a> <a  class="atu2"><img src="/static/img/shouye.png"></a> </div>
				<a class="qu-ul1a" style="color:#313131;">首页</a> </li>
			<li>
				<div class="qu-tu1"> <a href="#" class="atu1"><img src="/static/img/sjsc-16.png"></a> <a href="#" class="atu2"><img src="/static/img/sjsc-16-1.png"></a> </div>
				<a href="#" class="qu-ul1a" style="color:#313131">客服在线</a> </li>
			<li style="position:relative" id="toshoppindlist">
			<div style=" background-color: rgb(210, 36, 36); border-radius: 50px; width: 12px; height: 12px; text-align: center; line-height: 12px; font-size:8px;font-weight:lighter;color: white; right: 25%;position:absolute;display:none;text-shadow:none" id="cart_total"></div>
				<div class="qu-tu1"> <a class="atu1"><img src="/static/img/sjsc-17.png"></a> <a class="atu2"><img src="/static/img/sjsc-17-1.png"></a> </div>
				<a class="qu-ul1a" style="color:#313131">购物车</a> 
				
				
				</li>
			<li id="towode">
				<div class="qu-tu1"> <a  class="atu1"><img src="/static/img/sjsc-18.png"></a> <a   class="atu2"><img src="/static/img/sjsc18-1.png"></a> </div>
				<a  class="qu-ul1a" style="color:#313131 ">我的</a> </li>
			<div style="clear:both;"></div>
		</ul>
		
	</div>
    
 
</div>
<script type="text/javascript">
	var openid=getUrldata('OPENID');
	$(document).on('pageshow','#home',function(){
		cardinfo();
		getzhanghuyue();
		refreshCartTotal();
		$('#list').css('margin-bottom',$('#toindex').height()+10);
	});
	
	
	function getzhanghuyue(){
		var url="/webserver/api/v1/user/?format=json&openid="+openid;
		$.getJSON(url,function(rs){
			var object=rs.objects[0];
			
			var balance=object.balance;
			balance=parseFloat(balance).toFixed(2);
			$('#money').html(balance);
		});
	}
	
	
	
	var colors=[];
	
	
	
	colors.push('background:rgb(239,52,91);');
	colors.push('background:#fdb633;');
	/*
	var imgs={};
	imgs['0.1']='/static/img/1000song50.jpg';
	imgs['0.05']='/static/img/500song20.jpg';
	*/
	
	//充值
	function cardinfo(){
		var url="/webserver/api/v1/cardinfo/?format=json";
		$.getJSON(url,function(rs){
			var objects = rs.objects;
			$.each(objects,function(index,item){
				/*
				$('#list').append('<img id="'+item.id+'" src="'+imgs[(parseFloat(item.face_value)+"")]+'" width="96%" style="margin:5px 10px;display:inline-block" height="auto"/>');
				*/
				$('#list').append('<li style="width:85%;'+colors[index%colors.length]+'color:white;text-align:center;display:inline-block;border-radius:5px;font-size:16px;margin-top:10px;text-shadow: none;" id="'+item.id+'">'+item.name+'</li>');
				$('#'+item.id).click(function(){
					postAOrder(item.id,item.face_value);
				});
			});
			 
			$('#list').listview('refresh');
		});
		
	
	} 
	
	
	function postAOrder(id,price){
		var url = "/webserver/api/v1/carditem/";
		var aa={};
		aa.cardinfo="/webserver/api/v1/cardinfo/"+id+"/";
		aa.openid=openid;
		aa.price=price;
	
		dopost(url,aa,function(rs){
			
			pay(rs.id);
		});
		
	}
	
	 
	
	
	function pay(id){
		var url="/weixin/getcardpayparm/";
		$.post(url,{"carditemid":id},function(aa){
			
			if (typeof WeixinJSBridge == "undefined"){
				if( document.addEventListener ){
					document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
				}else if (document.attachEvent){
					document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
					document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
				}
			}else{
				onBridgeReady(aa);
			}
		}, "json");
	}
	
	
	function onBridgeReady(aa){
		WeixinJSBridge.invoke('getBrandWCPayRequest', {
			"appId" : aa.appId,     //公众号名称，由商户传入     
			"timeStamp" : aa.timeStamp+"",         //时间戳，自1970年以来的秒数     
			"nonceStr"  :  aa.nonceStr, //随机串     
			"package"  :  aa.package,
			"signType"  :  aa.signType,         //微信签名方式 : 
			"paySign"  :  aa.paySign //微信签名 
		},
		function(res){     
			if(res.err_msg == "get_brand_wcpay_request:ok" ) {
				toast('支付成功');
				setTimeout(function(){
					document.location.reload();
				},1000);
			}
		});
	}
	
	
	
	
	
	function refreshCartTotal(){
		var num=cartHelper.getCart().count;
		if(num>0){
			$('#cart_total').html(num);
			$('#cart_total').show();
		}else{
			$('#cart_total').hide();
		}
	}
	
	$('#toindex').click(function(){
		document.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx1ef1259eec8b148d&redirect_uri=http%3a%2f%2fwww.tiantianhw.cn%2fmshop%2findex.html&response_type=code&scope=snsapi_base&state=1#wechat_redirect";
	});
	
	$('#toshoppindlist').click(function(){
		window.location.href="shoppinglist.html?OPENID="+openid;
	});
	
	$('#towode').click(function(){
		document.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx1ef1259eec8b148d&redirect_uri=http%3a%2f%2fwww.tiantianhw.cn%2fmshop%2fhuiyuanshouye.html&response_type=code&scope=snsapi_base&state=1#wechat_redirect";
	});
	
	
	$('#toxiugaimima').click(function(e) {
        document.location.href="xiugaimima.html?OPENID="+openid;
    });
	
</script>
</body>
</html>